<div class="margen"></div>
<div class="container_16">
    <div class="push_4 grid_7 containerHeightMod">
        <h2>Tus tarjetas</h2>
        <table id="tarjetas" width="100%">
            <thead>
            <tr>
                <th><?= lang("codigoTarjeta") ?></th>
                <th><?= lang("titularTarjeta") ?></th>
                <th><?= lang("saldo") ?></th>
                <th><?= lang("fechaCaducidad") ?></th>
            </tr>
            </thead>
            <tbody>
                <?php foreach ($tarjetas as $t): ?>
                    <tr>
                        <td><?= substr($t->codigo, 0, 4) . " " . substr($t->codigo, 4, 4) . " " . substr($t->codigo, 8, 4) . " " . substr($t->codigo, 12, 4); ?></td>
                        <td><?= $t->titular ?></td>
                        <td><?= number_format($t->saldo, 2, ',', '.') ?> &euro;</td>
                        <td><?= $t->fechaCaducidad ?></td>
                    </tr>
                <?php endforeach; ?>
                </tbody>
        </table>
    </div>
</div>
<script>
    $(document).ready(function () {
        $('#tarjetas').dataTable({
            "bJQueryUI":true,
            "bInfo":false,
            "bSort":false,
            "bAutoWidth":false,
            "bPaginate":false,
            "oLanguage":{
                "sUrl":"<?= lang('datatables_lng') ?>"
            }
        });
    });
</script>
<style>
    .dataTables_filter {
        display: none;
    }

    .margen {
        margin-top: -300px;
    }

    .containerHeightMod {
        min-height: 285px
    }
</style>